<template>
  <el-dialog :model-value="visible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
    width="900">
    <el-form :model="form">
      <el-row :gutter="24">
        <el-col :span="14">
          <el-form-item label="角色名称" label-width="100px">
            <el-input v-model="form.name" placeholder="请输入角色名称" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="排序" label-width="100px">
            <el-input type="number" v-model="form.sort" min="0" placeholder="请输入排序(0...n数字越大越靠后)" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="备注" label-width="100px">
            <el-input v-model="form.note" placeholder="请输入备注" autocomplete="off" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否启用" label-width="100px">
            <el-switch v-model="form.enabled" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="菜单栏目" label-width="100px">
            <el-transfer v-model="form.authIds" :titles="['未分配', '已分配']" :data="menuData" @change="menuChangeFn" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancelFn">取消</el-button>
        <el-button type="primary" @click="confirmFn">确认</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
// import { institutionAuthList } from '@/server/api'
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  menuData: {
    type: Array,
    default: []
  },
  forms: {
    type: Object
  }
})
const form = props.forms;
// 获取菜单栏目
// const menuData = ref([])
// const { data: menuRes } = await useAsyncData('institutionAuthList', () => useServerRequest(institutionAuthList, {
//   method: 'get'
// }))
// if (menuRes.value && menuRes.value.errno === 0) {
//   menuRes.value.result.forEach(item => {
//     item.label = item.name;
//     item.key = item.id;
//     // 设置默认导航
//     if (item.viewPath == '/admin') {
//       item.disabled = true;
//       form.authIds = [item.id];
//     }
//   })
//   menuData.value = menuRes.value.result;
// }
// 菜单栏目选择
const menuChangeFn = (val) => {
  form.authIds = val;
}
// 取消
const emit = defineEmits(['pick'])
const cancelFn = () => {
  emit('pick', { visible: false })
}
// 确认
const confirmFn = () => {
  emit('pick', { visible: false, form })
}
</script>

<style lang="less" scoped></style>